<template>
    <transition name="slide-right">
        <v-touch v-on:swiperight="" class="content content-contact-add">
            <div class="contact-title">
                <span class="contact-left mui-icon mui-icon-back" @click="backRoute()"></span>
                <span>{{ $t('m.my.contact.add.listTitle') }}</span>
                <span class="contact-right contact-save-active" @click="save()" v-if="button">{{ $t('m.my.contact.add.prompt[0]') }}</span>
                <span class="contact-right" v-else>{{ $t('m.my.contact.add.prompt[0]') }}</span>
            </div>
            <div class="contact-information">
                <input type="text" :placeholder="$t('m.my.contact.add.prompt[1]')" v-model="title" @keyup="canSave()">
                <input type="text" :placeholder="$t('m.my.contact.add.prompt[2]')" v-model="tip">
            </div>
            <div class="contact-address">
                <div class="address-font">
                    <img src="@/assets/img/detele.png" alt="">
                    <span class="address-name">ETSC:</span>
                </div>
                <div class="content-textarea">
                    <textarea :placeholder="$t('m.my.contact.add.prompt[3]')" v-model="address" @keyup="canSave()"></textarea>
                </div>
                <div class="address-scan"><img src="@/assets/img/saomiao.png" alt="" @click="changeRoute('/scan')"></div>
            </div>
            <Success></Success>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {myAlert} from "@/assets/js/h5plus/nativeUI";

    export default {
        name: "my_contact_add",
        mounted() {
            let address = this.$route.query.address;
            if (address) {
                this.address = address;
            }
        },
        data() {
            return {
                title: "",
                tip: "",
                address: "",
                button: false
            }
        },
        methods: {
            canSave: function () {
                this.button = this.title != '';
            },
            save: function () {
                if(this.address == ''){
                    myAlert({
                        msg: this.$t('m.my.contact.add.prompt[4]'),
                        button: this.$t('m.my.contact.add.prompt[5]')
                    });
                    return;
                }
                this.contactList = JSON.parse(localStorage.getItem('contract') ? localStorage.getItem('contract') : "[]");
                this.contactList.push({
                    title: this.title,
                    tip: this.tip,
                    address: this.address,
                });
                localStorage.setItem('contract', JSON.stringify(this.contactList));
                this.aSuccess({
                    show: true,
                    tip: this.$t('m.component.alert_shot.prompt1[0]'),
                }).then(() => {
                    this.backRoute()
                });
            }
        }
    }
</script>
<style scoped>
    @import '../../../assets/css/contact.css';

    .content-contact-add {
        background: #ffffff;
    }

    .contact-save-active {
        color: #1087CD;
    }
</style>